<template>

  <section class="bgWhite pb60">
    <div class="main">
      <div class="pt30 mb20">
        <externalLinks />
      </div>
      <Row  type="flex" justify="space-between">
        <Col flex="770px">
          <firstList></firstList>
        </Col>
        <Col flex="370px">
          <dynamic></dynamic>
        </Col>
      </Row>
    </div>
  </section>

  <section class="pt60 pb60">
    <div class="main">
      <process></process>
    </div>
  </section>

  <section class="bgWhite pt60 pb60">
    <div class="main">
      <problem></problem>
    </div>
  </section>

  <attention></attention>
</template>

<script lang="ts" >
import { defineComponent,  provide  } from "vue";
import { Row, Col } from "ant-design-vue";
import { externalLinks , firstList , dynamic , process , problem , attention , banner} from './src';
import iconExplain from '/src/assets/img/icon-explain.png';
import { cmsFirstEnum } from '/@/api/theme';

import {useRoute} from "vue-router";
export default defineComponent({
  name: "ThemeModule",
  components: { Row, Col , externalLinks , firstList , dynamic , process , problem , attention , banner },
  setup: function () {
    const {params} = useRoute();
    const itemId: string = params.id as string;
    provide("itemId", itemId);
    return {
      iconExplain, cmsFirstEnum, itemId
    }
  }
})
</script>

<style lang="less" scoped>
.service-detail {
  padding-top: 60px;

  .service-detail_explain {
    height: 64px;
    background: #F6F6F8;

    .main {
      height: 100%;
      align-items: center;

      .pic {
        width: 95px;

        img {
          width: 100%;
        }
      }

      .desc {
        padding-top: 3px;
        margin-left: 20px;
        font-size: 16px;
        color: #333;
      }
    }
  }
}
</style>
